<!--
  ~ -
  ~  ============LICENSE_START=======================================================
  ~  Copyright (C) 2016-2018 European Support Limited
  ~  Modification Copyright (C) 2022 Nordix Foundation.
  ~  ================================================================================
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->

<div class="service-dependencies-editor">
    <form class="w-sdc-form">

        <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>

        <div class="i-sdc-form-content">
            <div class="rule-builder-content">
                <div class="i-sdc-form-item rule-input-field property" *ngIf="filterType == FILTER_TYPE_CAPABILITY">
                    <label class="i-sdc-form-label required">{{"CAPABILITY_LABEL" | translate}}</label>
                    <ui-element-dropdown
                        class="i-sdc-form-select"
                        data-tests-id="servicePropertyName"
                        [values]="capabilityDropdownList"
                        [(value)]="currentRule.capabilityName"
                        (change)="onCapabilityChange()">
                    </ui-element-dropdown>
                </div>
                <div class="i-sdc-form-item rule-input-field property">
                    <label class="i-sdc-form-label required">{{"PROPERTY_LABEL" | translate}}</label>
                    <ui-element-dropdown
                            class="i-sdc-form-select"
                            data-tests-id="servicePropertyName"
                            [values]="servicePropertyDropdownList"
                            [(value)]="currentRule.servicePropertyName"
                            (change)="onPropertyChange()">
                    </ui-element-dropdown>
                </div>
                <div class="i-sdc-form-item rule-input-field operator">
                    <label class="i-sdc-form-label required">{{"OPERATOR_LABEL" | translate}}</label>
                    <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator"
                                         [testId]="'constraintOperator'"
                                         (change)="onSourceTypeChange()"
                                         [values]="operatorTypes" [(value)]="currentRule.constraintOperator"
                                         >
                    </ui-element-dropdown>
                </div>
            </div>
            <div class="rule-builder-content">
                <div class="i-sdc-form-item">
                    <label class="i-sdc-form-label required">Value Type</label>
                    <input type="radio" name="sourceType"
                           data-tests-id="value-type-static"
                           [(ngModel)]="selectedSourceType"
                           [value]="SOURCE_TYPES.STATIC.value"
                           (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_LABEL" | translate}}
                    <input type="radio" name="sourceType"
                           data-tests-id="value-type-tosca-function"
                           [(ngModel)]="selectedSourceType"
                           [value]="isValidValuesOperator() || isRangeType() || isInRangeOperator() ? SOURCE_TYPES.TOSCA_FUNCTION_LIST.value: SOURCE_TYPES.TOSCA_FUNCTION.value"
                           (ngModelChange)="onSourceTypeChange($event)"/> {{"VALUE_EXPRESSION_LABEL" | translate}}
                </div>
            </div>
            <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty">
                <div class="i-sdc-form-item rule-input-field">
                    <tosca-function [property]="selectedProperty"
                                    [overridingType] = "isLengthOperator() ? overridingType : undefined"
                                    [componentInstanceMap]="componentInstanceMap"
                                    [customToscaFunctions]="customToscaFunctions"
                                    [overridingType]="overridingType"
                                    [allowClear]="false"
                                    (onValidityChange)="onToscaFunctionValidityChange($event)"
                    >
                    </tosca-function>
                </div>
            </div>
            <div class="rule-builder-content" *ngIf="isToscaFunctionSource() && selectedProperty && (isRangeType() || isInRangeOperator())">
                <div class="i-sdc-form-item rule-input-field">
                    <tosca-function [property]="selectedProperty"
                                    [componentInstanceMap]="componentInstanceMap"
                                    [customToscaFunctions]="customToscaFunctions"
                                    [allowClear]="false"
                                    (onValidityChange)="onToscaFunctionValidityChange($event)"
                    >
                    </tosca-function>
                </div>
            </div>

            <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && (isRangeType() || isInRangeOperator())">

                <div class="i-sdc-form-item rule-input-field">
                    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of rangeToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
                        <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
                            <tosca-function [property]="selectedProperty"
                                            [inToscaFunction]="val"
                                            [componentInstanceMap]="componentInstanceMap"
                                            [customToscaFunctions]="customToscaFunctions"
                                            [allowClear]="false"
                                            (onValidityChange)="onToscaRangeFunctionListValidityChange($event, valueIndex)"
                            >
                            </tosca-function>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rule-builder-content" *ngIf="isToscaFunctionListSource() && selectedProperty && isValidValuesOperator()">

                <div class="i-sdc-form-item rule-input-field">
                    <div class="add-btn"
                         (click)="addToList()">Add to List
                    </div>
                    <div class="w-sdc-form-columns-wrapper" *ngFor="let val of this.validValuesToscaFunctionList; let valueIndex = index; trackBy:trackByFn">
                        <div class="w-sdc-form-column" style="border-width:3px; border-style:solid; border-color:#009fdb; padding: 1em;">
                            <tosca-function [property]="selectedProperty"
                                            [inToscaFunction]="val"
                                            [componentInstanceMap]="componentInstanceMap"
                                            [customToscaFunctions]="customToscaFunctions"
                                            [allowClear]="false"
                                            (onValidityChange)="onToscaFunctionListValidityChange($event, valueIndex)"
                            >
                            </tosca-function>
                        </div>
                        <div class="w-sdc-form-column">
                            <span class="sprite-new delete-btn" (click)="removeFromList(valueIndex)"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="isToscaFunctionSource() && !selectedProperty">
                {{"NODE_FILTER_SELECT_PROPERTY" | translate}}
            </div>
            <div class="rule-builder-content" *ngIf="isStaticSource()">
                <div class="i-sdc-form-item rule-input-field complex-input-field">
                    <dynamic-property
                            *ngIf="isComplexListMapType() && !isRangeType() && !isValidValuesOperator() && !isLengthOperator()"
                        [selectedPropertyId]="selectedProperty.uniqueId"
                        [property]="selectedProperty"
                        [expandedChildId]="selectedProperty.expandedChildPropertyId ?
                                selectedProperty.expandedChildPropertyId : selectedProperty.name"
                        [canBeDeclared]="true"
                        [hideCheckBox]="true"
                        (propertyChanged)="updateComplexListMapTypeRuleValue()"
                        [rootProperty]="selectedProperty"
                        (expandChild)="selectedProperty.updateExpandedChildPropertyId($event)">
                    </dynamic-property>
                    <dynamic-element
                        *ngIf="!isComplexListMapType() && !isValidValuesOperator()"
                        [(value)]="currentRule.value"
                        class="rule-assigned-value"
                        data-tests-id="ruleAssignedValue"
                        (elementChanged)="onValueChange($event.isValid)"
                        [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
                        [operator]="currentRule.constraintOperator">
                    </dynamic-element>
                    <dynamic-element
                            *ngIf="isComplexListMapType() && isLengthOperator()"
                            [(value)]="currentRule.value"
                            class="rule-assigned-value"
                            data-tests-id="ruleAssignedValue"
                            (elementChanged)="onValueChange($event.isValid)"
                            [type]="isLengthOperator() ? 'integer' : selectedProperty ? selectedProperty.type : 'string'"
                            [operator]="currentRule.constraintOperator">
                    </dynamic-element>
                    <dynamic-element
                            *ngIf="isRangeType()"
                            [(value)]="currentRule.value"
                            class="rule-assigned-value"
                            data-tests-id="ruleAssignedValue"
                            (elementChanged)="onValueChange($event.isValid)"
                            [type]="selectedProperty ? selectedProperty.type : 'string'">
                    </dynamic-element>
                    <dynamic-element
                            *ngIf="isValidValuesOperator()"
                            [(value)]="currentRule.value"
                            class="rule-assigned-value"
                            data-tests-id="ruleAssignedValue"
                            (elementChanged)="onValueChange($event.isValid)"
                            [type]="selectedProperty ? selectedProperty.type : 'string'"
                            [operator]="currentRule.constraintOperator">
                    </dynamic-element>
                </div>
            </div>
        </div>
    </form>
</div>
